<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-07-29 16:50:27
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-23 09:36:56
 * @FilePath: \hy-ui\src\views\otherPages\fileView\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="20" style="padding:0 12px">
      <!--部门数据-->
     
        <el-col :span="4" :xs="24" style="padding-right:4px">
           <el-card class="box-card">
          <div class="head-container" >
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container" style="height:77.5vh; overflow: auto">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
           </el-card>
        </el-col>
     
      <!--用户数据-->
      
        <el-col :span="20" :xs="24" style="padding-left:4px">
          <el-card class="box-card">
          <div style="text-align: right; margin-bottom: 12px">
            <el-button type="primary" @click="handleDown" v-if="url.url"
              >下载</el-button
            >
          </div>
          <div class="main_file">
            <el-empty description="暂无文件" v-if="!url.url"></el-empty>
            <VueOfficeDocx
              :src="url.url"
              style="width: 100%; height: 78vh"
              @rendered="rendered"
              v-if="url.url && fileType === 'docx'"
            />
            <VueOfficePdf
              :src="url.url"
              style="width: 100%; height: 78vh"
              @rendered="rendered"
              v-if="url.url && fileType === 'pdf'"
            />
            <VueOfficeExcel
              :src="url.url"
              style="width: 100%; height: 78vh"
              v-if="url.url && (fileType === 'xls' || fileType === 'xlsx')"
              @rendered="rendered"
            />
          </div>
           </el-card>
        </el-col>
     
    </el-row>
  </div>
</template>


<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";
import request from "@/utils/request";
export default {
  name: "fileView",
  components: {
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel,
  },
  data() {
    return {
      url: {},
      loading: false,
      deptName: undefined,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "name",
      },
      fileType: undefined,
    };
  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(val) {
      if (!!val?.files) {
        this.loading = true;
        const file = JSON.parse(val?.files);
        if (file?.[0]?.url) {
          const fileTypeArr = file?.[0]?.url?.split(".");
          this.fileType = fileTypeArr.at(-1);
        }
        this.url = file?.[0] || {};
        console.log(this.url, this.fileType);
      }
    },
    /** 查询树形文件列表 */
    async getDeptTree() {
      const res = await request({
        url: "/frontView/page/crudQuery/oaFileMan",
        method: "POST",
        data: { page: 1, perPage: 9999 },
      });
      if (res.code === 200) {
        this.deptOptions = res.data.rows;
      } else {
        this.$message.error(res.msg);
      }
      this.loading = false;
    },
    rendered() {
      this.loading = false;
      console.log("success");
    },
    errorHandler() {
      this.loading = false;
      console.log("error");
    },
    handleDown() {
      const a = document.createElement("a");
      a.href = this.url.url;
      a.download = this.url.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  },
  mounted() {
    this.loading = true;
    this.getDeptTree();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .docx-wrapper {
  background: #f3f3f3;
}
::v-deep .vue-office-pdf-wrapper {
  background: #f3f3f3 !important;
}
.main_file {
  height: 78vh;
  overflow-y: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>